import { Outlet, useNavigate } from 'react-router-dom';

import OnlyIfAuthenticated from '../../components/biz/OnlyIfAuthenticated';
import Card from '../../components/ui/Card';
import CategoriedList from '../../components/ui/CategoriedList';

export default function MePage() {
  return <OnlyIfAuthenticated>{() => <MeContent />}</OnlyIfAuthenticated>;
}

function MeContent() {
  const navigate = useNavigate();

  return (
    <div className="flex gap-1">
      <Card className="w-48">
        <CategoriedList
          items={[
            {
              name: '个人信息',
              active: false,
              items: [{ name: '我的', onClick: () => navigate('/me'), active: false }],
            },
            {
              name: '内容',
              active: false,
              items: [{ name: '文章', onClick: () => navigate('/me/post-collections'), active: false }],
            },
          ]}
        />
      </Card>
      <Card className="flex-1">
        <Outlet />
      </Card>
    </div>
  );
}
